import React from 'react';
import Header from '@/components/Header';
import UserInfo from '@/components/UserInfo';
import GoBack from '@/components/GoBack';
import { Select, Input, Button } from 'antd';
interface ModuleCfgProps {
  history: any;
  location: any;
}
export default function ModuleCfg(props: ModuleCfgProps) {
  const { location, history } = props;
  const { id } = location.query;
  const onClick = () => {
    history.push({
      pathname: id ? '/editor' : '/creator',
      query: {
        tid: id,
      },
    });
  };
  return (
    <div className="flex flex-col h100p">
      <Header
        leftRender={<GoBack className="pl16" />}
        rightRender={<UserInfo />}
      />
      <div className="p20 bg-panel">
        <div className="mb8 flex items-center">
          电子书版本：
          <div className="ml20">
            <Select placeholder="选择电子书类型">
              <Select.Option value="1">教材</Select.Option>
            </Select>
          </div>
          <div className="ml20">
            <Select placeholder="选择出版社版本">
              <Select.Option value="1">PEP（人教版）</Select.Option>
            </Select>
          </div>
          <div className="ml20">
            <Select placeholder="选择学段">
              <Select.Option value="1">小学</Select.Option>
            </Select>
          </div>
          <div className="ml20">
            <Select placeholder="选择学科">
              <Select.Option value="1">语文</Select.Option>
            </Select>
          </div>
          <div className="ml20">
            <Select placeholder="选择年级">
              <Select.Option value="1">一年级</Select.Option>
            </Select>
          </div>
          <div className="ml20">
            <Select placeholder="选择册">
              <Select.Option value="1">上册</Select.Option>
            </Select>
          </div>
          <div className="ml20">
            <Select placeholder="选择版本">
              <Select.Option value="1">A版</Select.Option>
            </Select>
          </div>
        </div>
        <div className="mb8 flex items-center">
          电子书名称：
          <div className="ml20">
            <Input />
          </div>
          <div className="ml20">
            封面：<Button type="primary">上传</Button>
          </div>
        </div>
        <div className="mb8 flex items-center">
          模块：{' '}
          <Button type="primary" onClick={onClick}>
            {id ? '编辑' : '新建'}课本
          </Button>
        </div>
      </div>
    </div>
  );
}
